<template>
    <div class="recommend" @scroll="binScroll" ref="recommend">
        <div class="banner" ref="banner">
            <van-swipe :autoplay="3000" indicator-color='#fbc959'>
                <van-swipe-item v-for="(item, index) in banner" :key="index">
                    <img :src="item.i" @click="toactivity(item.url,item.t)" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="content" ref="content">
            <span v-for="(item, index) in data" :key="index">
            <div class="item" v-if="item.type===3">
                <div class="top">
                    <div class="userImg">
                        <img :src="item.note.author.p" alt="" @click="binuser(item.note.author.id)">
                    </div>
                    <div class="userName">{{item.note.author.n}}</div>
                    <div class="userIv" v-if="item.note.author.lvl!=''">LV.{{item.note.author.lvl}}</div>
                </div>
                <div class="img" @click="bint3(item.note.id)">
                    <img :src="item.note.image_u" alt="">
                </div>
                <div class="bottom">
                    <div class="title">{{item.note.title}}</div>
                    <div class="biaoqian">
                        <span v-for="(title,index) in item.note.events" :key="index"># {{title.name}}</span>
                    </div>
                </div>
            </div>
            <div class="item" v-if="item.type===1">
                <div class="top">
                    <div class="userImg">
                        <img :src="item.r.a.p" alt="" @click="binuser(item.r.a.id)">
                    </div>
                    <div class="userName">{{item.r.a.n}}</div>
                    <div class="userIv">LV.{{item.r.a.lvl}}</div>
                </div>
                <div class="img" @click="bint1(item.r.id)">
                    <div class="learned_count_text" v-if="item.r.learned_count_text!=''">{{item.r.learned_count_text}}</div>
                    <img :src="item.r.img" alt="">
                </div>
                <div class="bottom">
                    <div class="shouchang" v-if="item.r.collect_count_text!=''">
                        <div class="left">
                            <div :class="'img'+i" v-for="(src,i) in item.r.collect_users" :key="i">
                                <img :src="src.p" alt="">
                            </div>
                        </div>
                        <div class="right">{{item.r.collect_count_text}}</div>
                    </div>
                    <div class="title">{{item.r.n}}</div>
                </div>
            </div>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name:'recommend',
        data() {
            return {
                banner:[],
                data:[],
                timer:0
            }
        },
        created(){
            this.axios.get(`https://apis.netstart.cn/douguo/home/recommended/0/10`). then((response) => {
            this.data = response.data.result.list
            this.banner = response.data.result.banner
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.banner.scrollHeight+this.$refs.content.scrollHeight-this.$refs.recommend.scrollTop===this.$refs.recommend.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/home/recommended/${length}/10`). then((response) => {
                        this.data.push(...response.data.result.list) 
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
            bint3(id){
                this.$router.push({name:'type3',query:{id}})
            },
            binuser(id){
                this.$router.push({name:'user',query:{id}})
            },
            toactivity(src,title){
                this.$router.push({ name: 'activityCont',query:{src,title}}) 
            }

        }
    }
</script>

<style lang="less" scoped>
    .recommend{
      width: 100%;
      height: calc(100vh - 100px);
      overflow: auto;
    }
    .banner{
        width: 100%;
        // height: 110px;
    }
    .content{
        width: 100%;
        height: calc(100vh - 210px);
        .item{
            padding-top: 10px;
            width: 100%;
            .top{
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                .userImg{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-left: 10px;
                }
                .userName{
                    height: 30px;
                    line-height: 30px;
                    margin-left: 10px;
                }
                .userIv{
                    height: 30px;
                    line-height: 30px;
                    margin-left: 10px;
                    color: #fbc959;
                }
            }
            .img{
                width: 100%;
                position: relative;
                .learned_count_text{
                    position: absolute;
                    color: white;
                    padding: 10px;
                    bottom: 0;
                    left: 0;
                }
            }
            .bottom{
                padding: 10px;
                .title{
                    width: 100%;
                    margin-bottom: 10px;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .biaoqian{
                    span{
                        color: #50969F;
                        font-weight: 800;
                        margin-right: 10px;
                    }
                }
                .shouchang{
                    margin-bottom: 10px;
                    display: flex;
                    .left{
                        display: flex;
                        margin-right: 10px;
                        .img0{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                        .img1{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                        .img2{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                        .img3{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
        .foot{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
        }
    }
    img{
        width: 100%;
    }
</style>